<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模块</title>
</head>
<body>
    <h1>模块</h1>

    <script type="module">
        // 使用import取代require
        // bad
        const moduleA = require('moduleA');
        const func1 = moduleA.func1;
        const func2 = moduleA.func2;

        // good
        import { func1, func2 } from 'moduleA';

        // 使用export取代module.exports
        // bad
        var React = require('react');
        var Breadcrumbs = React.createClass({
            render() {
                return <nav />;
            }
        });
        module.exports = Breadcrumbs;

        // good
        import React from 'react';
        class Breadcrumbs extends React.Component {
            render() {
                return <nav />;
            }
        }
        export default Breadcrumbs;

        // 实际应用示例
        // api.js
        export const fetchUser = async (id) => {
            const response = await fetch(`/api/users/${id}`);
            return response.json();
        };

        export const updateUser = async (id, data) => {
            const response = await fetch(`/api/users/${id}`, {
                method: 'PUT',
                body: JSON.stringify(data)
            });
            return response.json();
        };

        // utils.js
        export const formatDate = (date) => {
            return new Date(date).toLocaleDateString();
        };

        export const formatCurrency = (amount) => {
            return new Intl.NumberFormat('zh-CN', {
                style: 'currency',
                currency: 'CNY'
            }).format(amount);
        };

        // main.js
        import { fetchUser, updateUser } from './api.js';
        import { formatDate, formatCurrency } from './utils.js';

        const displayUserInfo = async (userId) => {
            const user = await fetchUser(userId);
            console.log(`
                用户信息：
                注册时间：${formatDate(user.registerDate)}
                账户余额：${formatCurrency(user.balance)}
            `);
        };
    </script>
</body>
</html> 